<template>
<div class="bubble-main">
  <div id="message">
    <div class="message-body"> {{message.message}}</div>
    <div class="message-time"> {{fomattime(message.time)}}</div>
  </div>
  <div id="bubble-avator"> <avator></avator></div>
</div>
</template>

<script>
import  {defineComponent} from "vue";
import Avator from "@/components/Avator.vue";
import { createPopper } from '@popperjs/core';
import dayjs from "dayjs";
import {right} from "core-js/internals/array-reduce";
export default  defineComponent({
  name:'bubble',
  components:{Avator},
  props: {
    message : {
      type: Object,
      required: true,
    },
    isMe: {
      type: Boolean,
      required: true,
    }
  },
  mounted() {
    const popovers = document.querySelectorAll('#message');
    const avators = document.querySelectorAll('#bubble-avator');
    popovers.forEach((popover, index) => {
      if (this.isMe)
      {
        createPopper(avators[index], popover, {
          placement: 'left',
          modifiers: [
              {
                name: 'offset',
                options: {
                  offset: [20, 0]
                }
              }
          ]
        });
      }
      else
      {
        console.log('right');
        createPopper(avators[index],popover , {
          placement: 'right',
           modifiers: [
               {
                 name: 'offset',
                 options: {
                   offset: [ 20, 0]
                 }
               }
           ]
        });
      }
    })
  },
  methods:{
    fomattime(time)
    {
      return dayjs(time).format('YYYY-MM-DD')
    }
  }
})
</script>

<style scoped>
.bubble-main {
  display:flex;
  flex-direction: row;
  justify-self: flex-start;
  align-items: center;
}
.message-body {
  background: #b2ebf2;
}
.message-time {
  font-size: 10px;
}
#message {
  background: #86DBFF;
  border-radius: 5px;
  padding: 5px;
}

</style>
